import React, { memo } from 'react'
import {
  AppOutline,
  UnorderedListOutline,
  MessageOutline,
  UserOutline
} from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
const Tab = memo(() => {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />
    },
    {
      key: '/eat',
      title: '点餐',
      icon: <UnorderedListOutline />
    },
    {
      key: '/order',
      title: '订单',
      icon: <MessageOutline />
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />
    }
  ]
  const setRouteActive = value => {
    navigate(value)
  }
  return (
    <>
      {tabs.find(item => pathname.includes(item.key)) ? (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      ) : (
        ''
      )}
    </>
  )
})

export default Tab
